<template>
<div style="width: 100%;padding: 10px;">
<a-row>
      <a-col
        :span="12"
      
      >
        <div class="all" style="margin-right:10px;">
          <div id="grid-F1" class="grid-F1 grid-background" ></div>
        </div>
      </a-col>
      <a-col :span="12" >
        <div class="all">
          <div class="grid-F1 grid-background">
            <a-row>
              <a-col :span="17">
                <div id="grid-F2" style="height:310px"></div>
              </a-col>
              <a-col :span="7">
                <div
                  style="height: 45px;border-bottom: 2px solid #00d3e7;text-align: center;color: #fff;line-height: 45px;margin-left: 20px;
    margin-right: 20px;"
                >实时天气情况</div>
                <div
                  style="height: 95px;border-bottom: 2px solid #00d3e7;text-align: center;margin-left: 20px;
    margin-right: 20px;"
                >
                  <div style="
    font-size: 45px;color:#7f6beb;
">{{temper}}℃</div>
                  <div style="
    font-size: 16px;color:#c6c7c8
">{{windD}}，{{windS}}</div>
                </div>
                <div
                  style="height: 105px;margin-top:10px;border-top: 2px solid #00d3e7;border-bottom: 2px solid #00d3e7;text-align: center;color: #fff;margin-left: 20px;
    margin-right: 20px;"
                >
                  <div style="
    font-size: 45px;
" :style="aqiTextColor">{{currentaqi}}</div>
                  <div style="
    font-size: 16px;color:#c6c7c8
">实时AQI</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="16">
        <a-row>
          <a-col :span="24" style="
    margin-top: 10px;
">
            <div class="all" style="margin-right:10px;">
              <div id="grid-F4" class="grid-F4 grid-background"></div>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="
    margin-top: 10px;
">
            <div class="all"  style="margin-right:10px;">
              <div id="grid-F5" class="grid-F4 grid-background"></div>
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="8" style="
    margin-top: 10px;
">
        <div class="all">
          <div id="grid-F6" class="grid-F6 grid-background">
            <div class="grid-G2-Title">监测点信息</div>
            <a-table
              :pagination="false"
              :columns="columns"
              :dataSource="jcddata"
              size="middle"
              :customRow="clickRow"
            >
              <span slot="aqilevel" slot-scope="aqilevel">
                <a-tag :color="aqilevel.color">{{aqilevel.value}}</a-tag>
              </span>
            </a-table>
            <div id="grid-F7"></div>
          </div>
        </div>
      </a-col>
    </a-row>
</div>
</template>
<script>
import * as mapOper from '../../scripts/mapOper.js';
let config = require('../../config/config');
import commonOper from '../../scripts/commonOper';
import Utils from '../../scripts/Utils';

//导入自定义的openlayers.echart模块
import ADLayer from 'openlayers_echart';
var _ = require('lodash');

export default {
  name: 'Aqijcfx',
  data() {
    return {
      aqiTextColor: {
        color: '#c6c7c8'
      },
      //AQI
      currentaqi: '',
      //温度
      temper: '',
      //风向
      windD: '',
      //风速
      windS: '',
      hour24JcdData: [],
      F1Chart: null,
      F2Chart: null,
      F3Chart: null,
      F4Chart: null,
      F5Chart: null,
      F7Chart: null,
      jcddata: [],
      columns: [
        {
          title: '监测点',
          dataIndex: 'jcd'
        },
        {
          title: 'AQI',
          dataIndex: 'aqivalue'
        },
        {
          title: '质量等级',
          dataIndex: 'aqilevel',
          scopedSlots: { customRender: 'aqilevel' }
        },
        {
          title: 'PM2.5',
          dataIndex: 'pm25value'
        },
        {
          title: 'PM10',
          dataIndex: 'pm10value'
        },
        {
          title: 'SO2',
          dataIndex: 'sovalue'
        },
        {
          title: 'CO',
          dataIndex: 'covalue'
        },
        {
          title: 'NO2',
          dataIndex: 'novalue'
        },
        {
          title: 'O3_8h',
          dataIndex: 'o3value'
        }
      ],
      F4ChartOptions: {
        title: {
          top: '0',
          left: 'center',
          text: '乌海市每日AQI变化',
          textStyle: {
            align: 'center',
            color: '#FFFFFF'
            //fontSize: 16
          }
        },

        tooltip: {
          trigger: 'axis'
        },
        grid: {
          right: '10%',
          bottom: '10%',
          left: '2%',
          containLabel: true
        },
        xAxis: {
          data: [],
          nameTextStyle: {
            color: '#d4ffff'
          },
          axisLine: {
            lineStyle: {
              color: '#0B4CA9'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#FFF',
              fontSize: 12
            }
            //interval:0,
            //rotate:30
          }
        },
        yAxis: {
          nameTextStyle: {
            color: '#d4ffff'
          },
          position: 'left',
          axisLine: {
            lineStyle: {
              color: '#d4ffff'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#d4ffff'
            }
          },
          axisLabel: {
            color: '#d4ffff',
            fontSize: 12
          }
        },

        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 12,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 90,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        visualMap: {
          top: 10,
          right: 10,
          textStyle: {
            color: '#f2f2f2',
            fontSize: 13
          },
          pieces: [
            {
              gt: 0,
              lte: 50,
              color: '#096'
            },
            {
              gt: 50,
              lte: 100,
              color: '#ffde33'
            },
            {
              gt: 100,
              lte: 150,
              color: '#ff9933'
            },
            {
              gt: 150,
              lte: 200,
              color: '#cc0033'
            },
            {
              gt: 200,
              lte: 300,
              color: '#660099'
            },
            {
              gt: 300,
              color: '#7e0023'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: '乌海市 AQI ',
          type: 'line',
          data: [],
          markLine: {
            silent: true,
            data: [
              {
                yAxis: 50
              },
              {
                yAxis: 100
              },
              {
                yAxis: 150
              },
              {
                yAxis: 200
              },
              {
                yAxis: 300
              }
            ]
          }
        }
      },
      //
      F5ChartOptions: {
        timeline: {
          data: [],
          axisType: 'category',
          autoPlay: true,
          playInterval: 3000,
          left: '10%',
          right: '10%',
          bottom: '3%',
          width: '80%',
          //  height: null,
          label: {
            normal: {
              textStyle: {
                color: '#ddd'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          symbolSize: 10,
          lineStyle: {
            color: '#555'
          },
          checkpointStyle: {
            borderColor: '#777',
            borderWidth: 2
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: '#666',
              borderColor: '#666'
            },
            emphasis: {
              color: '#aaa',
              borderColor: '#aaa'
            }
          }
        },
        baseOption: {
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'cubicInOut',
          grid: {
            right: '1%',
            top: '15%',
            bottom: '10%',
            width: '20%'
          },
          tooltip: {
            trigger: 'axis', // hover触发器
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: {
                color: 'rgba(150,150,150,0.1)' //hover颜色
              }
            }
          }
        },
        options: []
      },
      F2ChartOption: {
        //backgroundColor: '#11183c',
        title: {
          text: '空气质量实时监测',
          x: 'center',
          //y: '80',
          subtext: '',
          textStyle: {
            // fontSize: 14,
            color: '#fff'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '25%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          show: true,
          x: 'center',
          y: '50',
          icon: 'stack',
          textStyle: {
            color: '#fff'
          },
          itemWidth: 10, // 设置宽度
          itemHeight: 10 // 设置高度
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['AQI', 'PM2.5', 'PM10', 'O₃', 'SO₂', 'NO₂', 'CO'],
          axisTick: {
            //---坐标轴 刻度
            show: true //---是否显示
          },
          axisLine: {
            //---坐标轴 轴线
            show: true, //---是否显示
            lineStyle: {
              color: '#fff',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            //X轴文字
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            //分割线
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLabel: {
            //Y轴刻度值
            formatter: '{value}',
            textStyle: {
              fontSize: 12,
              color: '#fff'
            }
          },
          axisLine: {
            //---坐标轴 轴线
            show: false //---是否显示
          }
        },
        series: [
          {
            name: '聚英学校',
            type: 'bar',
            data: [],
            barWidth: 10,
            //barGap: 3, //柱子之间间距 //柱图宽度      两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角  鼠标移上去圆角
            itemStyle: {
              normal: {
                color: '#446ACF'
              }
            }
          },
          {
            name: '市林业局',
            type: 'bar',
            data: [],
            barWidth: 10, //柱图宽度
            itemStyle: {
              normal: {
                //设置颜色的渐变
                color: '#3DB34D'
              }
            }
          },
          {
            name: '中海勃湾学校',
            type: 'bar',
            data: [],
            barWidth: 10, //柱图宽度
            itemStyle: {
              normal: {
                //设置颜色的渐变
                color: '#aecb56'
              }
            }
          }
        ]
      },
      F7ChartOption: {
        //backgroundColor: '#11183c',
        title: {
          text: '24小时变化',
          subtext: '实时数据清洗',
          x: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '20%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'item'
        },
        legend: {
          show: true,
          x: 'center',
          y: '40',
          icon: 'stack',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#1bb4f6'
          },
          data: ['AQI', 'PM2.5', 'PM10', 'O₃', 'SO₂', 'NO₂', 'CO']
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: '#30eee9'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#397cbc'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#195384'
              }
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '值',
            // min: 0,
            // max: 1000,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#2ad1d2'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#27b4c2'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#11366e'
              }
            }
          }
        ],
        series: [
          {
            name: 'AQI',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#0092f6',
                lineStyle: {
                  color: '#0092f6',
                  width: 1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(7,44,90,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,146,246,0.9)'
                    }
                  ])
                }
              }
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: 'red'
                }
              }
            },
            data: []
          },
          {
            name: 'PM2.5',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,

            itemStyle: {
              normal: {
                color: '#00d4c7',
                lineStyle: {
                  color: '#00d4c7',
                  width: 1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(7,44,90,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,212,199,0.9)'
                    }
                  ])
                }
              }
            },
            data: []
          },
          {
            name: 'PM10',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#aecb56',
                lineStyle: {
                  color: '#aecb56',
                  width: 1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(7,44,90,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(114,144,89,0.9)'
                    }
                  ])
                }
              }
            },
            data: []
          },
          {
            name: 'O₃',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#e32f46',
                lineStyle: {
                  color: '#e32f46',
                  width: 1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(7,44,90,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(114,144,89,0.9)'
                    }
                  ])
                }
              }
            },
            data: []
          },
          {
            name: 'SO₂',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#7049f0',
                lineStyle: {
                  color: '#7049f0',
                  width: 1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(7,44,90,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(114,144,89,0.9)'
                    }
                  ])
                }
              }
            },
            data: []
          },
          {
            name: 'NO₂',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#fa704d',
                lineStyle: {
                  color: '#fa704d',
                  width: 1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(7,44,90,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(114,144,89,0.9)'
                    }
                  ])
                }
              }
            },
            data: []
          },
          {
            name: 'CO',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: '#01babc',
                lineStyle: {
                  color: '#01babc',
                  width: 1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(7,44,90,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(114,144,89,0.9)'
                    }
                  ])
                }
              }
            },
            data: []
          }
        ]
      }
    };
  },
  mounted() {
    this.$nextTick(() => {
      // this.initF1Charts();
      this.initF2Charts();
      //this.initF3Charts();
      this.initF4Charts();
      this.initF5Charts();
      this.initF7Charts();
      this.initMap();
      this.getAqiHistoryData();
      this.getWeatherData();
      this.getAqiHourData();
    });
  },
  methods: {
    clickRow(record) {
      return {
        on: {
          click: () => {
            //console.log(record, index);
            let jcd = record.jcd;

            let that = this;
            if (that.hour24JcdData.length < 0) return;
            let grouparr = _.groupBy(that.hour24JcdData, function(item) {
              return item.positionname;
            });
            let tempdata = grouparr[jcd];
            this.resetF7Options(tempdata);
          }
        }
      };
    },
    initMap() {
      let map = mapOper.initBlankMap('grid-F1');
      let params = {
        map: map,
        center: [36398916.2801803, 4393765.13449465],
        zoom: 6
      };
      mapOper.ZoomAndCenter(params);
      let f1MapOption = {
        series: [
          {
            name: '监测点',
            type: 'effectScatter',

            encode: {
              value: 2
            },
            data: [
              {
                name: '聚英学校',
                value: [36398916.2801803, 4393765.13449465, 50]
              },
              {
                name: '市林业局',
                value: [36397837.6737836, 4396555.68704145, 50]
              },
              {
                name: '中海勃湾学校',
                value: [36396423.1572851, 4392165.79032534, 60]
              }
            ],
            symbolSize: function() {
              return 20;
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#ffde33',
                shadowBlur: 10,
                shadowColor: '#ffde33'
              }
            },
            zlevel: 1
          }
        ]
      };
      var oe1 = new ADLayer(f1MapOption, map, this.$echarts);
      oe1.render();
    },
    initF2Charts: function() {
      let that = this;
      let chartDiv = document.getElementById('grid-F2');
      that.F2Chart = that.$echarts.init(chartDiv);
      that.F2Chart.setOption(that.F2ChartOption);
      window.onresize = that.F2Chart;
    },
    initF4Charts: function() {
      let that = this;
      let chartDiv = document.getElementById('grid-F4');
      that.F4Chart = that.$echarts.init(chartDiv);
      //that.F4Chart.setOption(that.F4ChartOptions);
      window.onresize = that.F4Chart;
    },
    initF5Charts: function() {
      let that = this;
      let chartDiv = document.getElementById('grid-F5');
      that.F5Chart = that.$echarts.init(chartDiv);
      that.F5Chart.setOption(that.F5ChartOptions);
      window.onresize = that.F5Chart;
    },
    initF7Charts: function() {
      let that = this;
      let chartDiv = document.getElementById('grid-F7');
      this.F7Chart = this.$echarts.init(chartDiv);
      that.F7Chart.setOption(that.F7ChartOption);
      window.onresize = that.F7Chart;
    },
    getWeatherData: function() {
      let that = this;
      let param = {
        this: that,
        url: 'http://wthrcdn.etouch.cn/weather_mini?city=乌海', //config.webapiUrl+'/weather/getWeatherINfo',

        successFunc: response => {
          if (response.status == 200) {
            let info = response.data.data;
            let forecastarr = info.forecast;
            that.windD = forecastarr[0].fengxiang;
            let fl = forecastarr[0].fengli;

            fl = fl.replace('<![CDATA[', '');
            fl = fl.replace(']]>', '');
            that.windS = fl;
            that.temper = info.wendu;
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpGet(param);
    },
    //获取所有aqi天数据
    getAqiHistoryData: function() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month = (date.getMonth() + 1).toString();
      let day = date.getDate().toString();
      let that = this;
      let data = new FormData();
      data.append('cityName', '乌海市');
      data.append('startTime', '2010-01-01');
      data.append('endTime', year + '-' + month + '-' + day);
      data.append('dataType', 'day');
      let param = {
        this: that,
        url: config.webapiUrl + '/airQually/getHistoryAqiData',
        data: data,
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            that.resetF4Options(response.data.data);
            that.resetF5Options(response.data.data);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpPost(param);
    },
    //获取24小时aqi数据
    getAqiHourData: function() {
      let date = new Date();
      let year = date.getFullYear().toString();
      let month = (date.getMonth() + 1).toString();
      let day = date.getDate().toString();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      let data = new FormData();
      data.append('cityName', '乌海市');
      data.append('startTime', '2020-11-16 18:00:00');
      data.append(
        'endTime',
        year +
          '-' +
          month +
          '-' +
          day +
          ' ' +
          hour +
          ':' +
          minute +
          ':' +
          second
      );
      data.append('dataType', 'hour');
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/airQually/getHistoryAqiData',
        data: data,
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            //console.log('----',response.data.data);
            that.hour24JcdData = response.data.data;
            that.resetF2Options(response.data.data);
            let grouparr = _.groupBy(response.data.data, function(item) {
              return item.positionname;
            });
            that.resetF7Options(grouparr['聚英学校']);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpPost(param);
    },
    getTextAndColorByAqi: function(aqivalue) {
      let obj = { color: '', text: '' };
      if (aqivalue <= 50) {
        obj.color = '#096';
        obj.text = '优';
      } else if (aqivalue > 50 && aqivalue <= 100) {
        obj.color = '#ffde33';
        obj.text = '良';
      } else if (aqivalue > 100 && aqivalue <= 150) {
        obj.color = '#ff9933';
        obj.text = '轻度污染';
      } else if (aqivalue > 150 && aqivalue <= 200) {
        obj.color = '#cc0033';
        obj.text = '中度污染';
      } else if (aqivalue > 200 && aqivalue <= 300) {
        obj.color = '#660099';
        obj.text = '重度污染';
      } else if (aqivalue > 300) {
        obj.color = '#7e0023';
        obj.text = '严重污染';
      } else {
        obj.color = '#096';
        obj.text = '数据错误';
      }
      return obj;
    },
    resetF2Options(aqiData) {
      let that = this;
      let timearr = [];
      _.forEach(aqiData, function(o) {
        timearr.push(o.timepoint);
      });
      let maxtime = _.max(timearr);
      let sortlist = _.groupBy(aqiData, function(item) {
        return item.timepoint;
      });
      let latestdata = sortlist[maxtime];
      let aqidata = [];
      // let mp2data = [];
      // let pm10data = [];
      // let o3data = [];
      // let s2data = [];
      // let nodata = [];
      // let codata = [];
      let timestamp = '';
      let temptabledata = [];
      let juyindata = [];
      let yinyedata = [];
      let haibowdata = [];

      _.forEach(latestdata, function(value) {
        var date1 = new Date(value.timepoint);
        let timeformat = Utils.dateFormat(date1, 'yyyy-MM-dd HH:mm:ss');
        timestamp = timeformat;
        let tempaqi = value.aqi == '-;' ? 0 : Number(value.aqi);
        let temppm25 = value.pm25 == '-;' ? 0 : Number(value.pm25);
        let temppm10 = value.pm10 == '-;' ? 0 : Number(value.pm10);
        let tempo3 = value.o3 == '-;' ? 0 : Number(value.o3);
        let tempso2 = value.so2 == '-;' ? 0 : Number(value.so2);
        let tempno2 = value.no2 == '-;' ? 0 : Number(value.no2);
        let tempco = value.co == '-;' ? 0 : Number(value.co);
        let tempo38h = value.o38h == '-;' ? 0 : Number(value.o38h);
        aqidata.push(tempaqi);
        let aqiobj = that.getTextAndColorByAqi(tempaqi);
        temptabledata.push({
          key: value.id,
          jcd: value.positionname,
          //updatetime: value.timestamp,
          aqivalue: tempaqi,
          aqilevel: { color: aqiobj.color, value: aqiobj.text },
          pm25value: temppm25,
          pm10value: temppm10,
          sovalue: tempso2,
          covalue: tempco,
          novalue: tempno2,
          o3value: tempo38h
        });
        if (value.positionname == '聚英学校') {
          juyindata = [
            tempaqi,
            temppm25,
            temppm10,
            tempo3,
            tempso2,
            tempno2,
            tempco
          ];
        }
        if (value.positionname == '市林业局') {
          yinyedata = [
            tempaqi,
            temppm25,
            temppm10,
            tempo3,
            tempso2,
            tempno2,
            tempco
          ];
        }
        if (value.positionname == '中海勃湾学校') {
          haibowdata = [
            tempaqi,
            temppm25,
            temppm10,
            tempo3,
            tempso2,
            tempno2,
            tempco
          ];
        }
      });
      that.F2ChartOption.series[0].data = juyindata;
      that.F2ChartOption.series[1].data = yinyedata;
      that.F2ChartOption.series[2].data = haibowdata;
      that.F2ChartOption.title.subtext = timestamp;
      that.F2Chart.setOption(that.F2ChartOption);
      window.onresize = that.F2Chart;
      that.currentaqi = _.max(aqidata);

      let aqicolortext = that.getTextAndColorByAqi(that.currentaqi);
      that.aqiTextColor.color = aqicolortext.color;
      that.jcddata = temptabledata;
    },
    resetF4Options(aqiData) {
      let sortedarr = _.sortBy(aqiData, ['timestamp']);
      let xData = [];
      let seriesData = [];
      _.forEach(sortedarr, function(item) {
        var unixTimestamp = new Date(item.timestamp);
        var syear = unixTimestamp.getFullYear();
        var month = unixTimestamp.getMonth() + 1;
        var day = unixTimestamp.getDate();
        xData.push(syear + '-' + month + '-' + day);
        seriesData.push(item.aqi);
      });
      this.F4ChartOptions.xAxis.data = xData;
      this.F4ChartOptions.series.data = seriesData;
      this.F4Chart.setOption(this.F4ChartOptions);
      window.onresize = this.F4Chart;
    },
    resetF5Options(aqiData) {
      let that = this;
      let yeardata = [];
      let allyears = [];
      _.forEach(aqiData, function(value) {
        let temp = Number(value.aqi);
        let level = 'lv1';
        if (temp > 0 && temp <= 50) {
          level = 'lv1';
        } else if (temp > 50 && temp <= 100) {
          level = 'lv2';
        } else if (temp > 100 && temp <= 150) {
          level = 'lv3';
        } else if (temp > 150 && temp <= 200) {
          level = 'lv4';
        } else if (temp > 200 && temp <= 300) {
          level = 'lv5';
        } else if (temp > 300) {
          level = 'lv6';
        }
        var unixTimestamp = new Date(value.timestamp);
        var syear = unixTimestamp.getFullYear();
        allyears.push(syear);
        yeardata.push({ year: syear + '', aqi: temp, level: level });
      });

      var voltageLevel = [];

      let grouplv = _.groupBy(yeardata, function(item) {
        return item.year;
      });

      let yeararr = _.sortBy(_.uniq(allyears)); // ['2015', '2016', '2017', '2018', '2019'];
      for (var i = 0; i < yeararr.length; i++) {
        let tempdata = grouplv[yeararr[i]];

        voltageLevel.push(yeararr[i] + '年');
        let levelgroup = _.groupBy(tempdata, function(item) {
          return item.level;
        });
        let lv1count = levelgroup.lv1 === undefined ? 0 : levelgroup.lv1.length;
        let lv2count = levelgroup.lv2 === undefined ? 0 : levelgroup.lv2.length;
        let lv3count = levelgroup.lv3 === undefined ? 0 : levelgroup.lv3.length;
        let lv4count = levelgroup.lv4 === undefined ? 0 : levelgroup.lv4.length;
        let lv5count = levelgroup.lv5 === undefined ? 0 : levelgroup.lv5.length;
        let lv6count = levelgroup.lv6 === undefined ? 0 : levelgroup.lv6.length;
        let randerdata = [
          lv1count,
          lv2count,
          lv3count,
          lv4count,
          lv5count,
          lv6count
        ];

        that.F5ChartOptions.options.push({
          title: [
            {
              text: '乌海市历年污染状况统计',
              left: 'center',
              textStyle: {
                color: '#fff'
              }
            }
          ],
          radar: {
            center: ['25%', '40%'],
            radius: '60%',
            indicator: [
              { name: '优', max: 366 },
              { name: '良', max: 366 },
              { name: '轻度污染', max: 366 },
              { name: '中度污染', max: 366 },
              { name: '重度污染', max: 366 },
              { name: '严重污染', max: 366 }
            ],
            shape: 'polygon',
            splitNumber: 5,
            name: {
              textStyle: {
                color: 'rgb(238, 197, 102)'
              }
            },
            splitLine: {
              lineStyle: {
                color: [
                  'rgb(238, 197, 102)',
                  'rgba(238, 197, 102, 0.2)',
                  'rgba(238, 197, 102, 0.4)',
                  'rgba(238, 197, 102, 0.6)',
                  'rgba(238, 197, 102, 0.8)',
                  'rgba(238, 197, 102, 1)'
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(238, 197, 102, 0.4)'
              }
            }
          },
          series: [
            {
              name: '',
              type: 'radar',
              lineStyle: {
                normal: {
                  width: 5,
                  opacity: 0.5
                }
              },
              data: [randerdata],
              symbol: 'none',
              itemStyle: {
                normal: {
                  color: '#F9713C'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.9
                }
              }
            },
            {
              name: '优良',
              type: 'pie',
              radius: ['40%', '47%'],
              center: ['65%', '30%'],
              startAngle: 185,
              color: [
                new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#096'
                  },
                  {
                    offset: 1,
                    color: '#ffde33'
                  }
                ]),
                'transparent'
              ],
              labelLine: {
                normal: {
                  show: true
                }
              },
              label: {
                position: 'center'
              },
              data: [
                {
                  value: 75,
                  name: '优良',
                  label: {
                    formatter: '优良\n',
                    textStyle: {
                      color: '#fff',
                      fontSize: 12
                    }
                  }
                },
                {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: lv1count + lv2count + '天',
                      textStyle: {
                        color: '#096',
                        fontSize: 30
                      }
                    }
                  }
                },
                {
                  value: 42,
                  name: '%'
                }
              ]
            },
            {
              name: '轻度污染',
              type: 'pie',
              radius: ['40%', '47%'],
              center: ['80%', '30%'],
              startAngle: 185,
              color: [
                new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#ff9933'
                  },
                  {
                    offset: 1,
                    color: '#cc0033'
                  }
                ]),
                'transparent'
              ],
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [
                {
                  value: 75,
                  name: '轻度污染',
                  label: {
                    normal: {
                      formatter: '轻度污染\n',
                      textStyle: {
                        color: '#fff',
                        fontSize: 12
                      }
                    }
                  }
                },
                {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: lv3count + '天',
                      textStyle: {
                        color: '#ffde33',
                        fontSize: 30
                      }
                    }
                  }
                },
                {
                  value: 42,
                  name: '%'
                }
              ]
            },
            {
              name: '中度污染',
              type: 'pie',
              radius: ['40%', '47%'],
              center: ['56%', '60%'],
              startAngle: 185,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [
                {
                  value: 75,
                  itemStyle: {
                    normal: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#cc0033'
                          },
                          {
                            offset: 1,
                            color: '#660099'
                          }
                        ]
                      )
                    }
                  },
                  name: '中度污染',
                  label: {
                    normal: {
                      formatter: '中度污染\n',
                      textStyle: {
                        color: '#fff',
                        fontSize: 12
                      }
                    }
                  }
                },
                {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: lv4count + '天',
                      textStyle: {
                        color: '#cc0033',
                        fontSize: 30
                      }
                    }
                  }
                },
                {
                  value: 42,
                  name: '%'
                }
              ]
            },
            {
              name: '重度污染',
              type: 'pie',
              radius: ['40%', '47%'],
              center: ['72%', '60%'],
              startAngle: 185,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [
                {
                  value: 75,
                  itemStyle: {
                    normal: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#660099'
                          },
                          {
                            offset: 1,
                            color: '#7e0023'
                          }
                        ]
                      )
                    }
                  },
                  name: '重度污染',
                  label: {
                    normal: {
                      formatter: '重度污染\n',
                      textStyle: {
                        color: '#fff',
                        fontSize: 12
                      }
                    }
                  }
                },
                {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: lv5count + '天',
                      textStyle: {
                        color: '#660099',
                        fontSize: 30
                      }
                    }
                  }
                },
                {
                  value: 42,
                  name: '%'
                }
              ]
            },
            {
              name: '严重污染',
              type: 'pie',
              radius: ['40%', '47%'],
              center: ['88%', '60%'],
              startAngle: 185,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  position: 'center'
                }
              },
              data: [
                {
                  value: 75,
                  itemStyle: {
                    normal: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#7e0023'
                          },
                          {
                            offset: 1,
                            color: '#7e0023'
                          }
                        ]
                      )
                    }
                  },
                  name: '严重污染',
                  label: {
                    normal: {
                      formatter: '严重污染\n',
                      textStyle: {
                        color: '#fff',
                        fontSize: 12
                      }
                    }
                  }
                },
                {
                  value: 25,
                  name: '%',
                  label: {
                    normal: {
                      formatter: lv6count + '天',
                      textStyle: {
                        color: '#7e0023',
                        fontSize: 30
                      }
                    }
                  }
                },
                {
                  value: 42,
                  name: '%'
                }
              ]
            }
          ]
        });
      }

      that.F5ChartOptions.timeline.data = voltageLevel;
      that.F5Chart.setOption(that.F5ChartOptions);
    },
    resetF7Options(stationaqiData) {
      let that = this;
      let sortedArr = _.sortBy(stationaqiData, function(o) {
        o.timepoint;
      });
      let xdata = [];

      let aqidata = [];
      let pm25data = [];
      let pm10data = [];
      let o3data = [];
      let so2data = [];
      let no2data = [];
      let codata = [];
      let name = '';
      _.forEach(sortedArr, function(value) {
        var date1 = new Date(value.timepoint);
        let timeformat = Utils.dateFormat(date1, 'MM月dd日 HH');
        xdata.push(timeformat + '时');
        name = value.positionname;
        let tempaqi = value.aqi == '-;' ? 0 : Number(value.aqi);
        let temppm25 = value.pm25 == '-;' ? 0 : Number(value.pm25);
        let temppm10 = value.pm10 == '-;' ? 0 : Number(value.pm10);
        let tempo3 = value.o3 == '-;' ? 0 : Number(value.o3);
        let tempso2 = value.so2 == '-;' ? 0 : Number(value.so2);
        let tempno2 = value.no2 == '-;' ? 0 : Number(value.no2);
        let tempco = value.co == '-;' ? 0 : Number(value.co);
        //let tempo38h = value.o38h == '-;' ? 0 : Number(value.o38h);
        aqidata.push(tempaqi);
        pm25data.push(temppm25);
        pm10data.push(temppm10);
        o3data.push(tempo3);
        so2data.push(tempso2);
        no2data.push(tempno2);
        codata.push(tempco);
      });
      that.F7ChartOption.title.subtext = name;
      that.F7ChartOption.xAxis[0].data = xdata;
      that.F7ChartOption.series[0].data = aqidata;
      that.F7ChartOption.series[1].data = pm25data;
      that.F7ChartOption.series[2].data = pm10data;
      that.F7ChartOption.series[3].data = o3data;
      that.F7ChartOption.series[4].data = so2data;
      that.F7ChartOption.series[5].data = no2data;
      that.F7ChartOption.series[6].data = codata;
      that.F7Chart.setOption(that.F7ChartOption);
      window.onresize = that.F7Chart;
    }
  },
};
</script>
<style scoped>
.grid-F1 {
  height: 310px;
}
.grid-F4 {
  height: 320px;
  /* padding-top: 10px; */
}
.grid-F6 {
  height: 650px;
  padding: 20px;
}
#grid-F7 {
  height: 320px;
  margin-top: 50px;
}
.grid-G2-Title {
  font-size: 16px;
  color: rgb(255, 255, 255);
  text-align: center;
}
</style>